<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">	<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
	<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
	<script src="../../js/jquery-3.3.1.js"></script>
	<script src="../../js/application.js"></script>
	<link rel="stylesheet" href="../../layui/css/layui.css">
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<hr/>
<div class="layui-container">
				<form class="layui-form">
					<div class="layui-form-item">
						<div class="layui-inline" style="width:100px;">
							<select name="year" id="year" lay-filter="year"></select>
						</div>
					  	<div class="layui-input-inline"style="margin-right:20px;margin-left:50px;">
							<input style="width:200px;" type="text" id="routename" name="routename"class="layui-input" placeholder="请输入">
						</div>
						
						<div class="layui-inline" style="margin-left: 20px;">
							<button id="btnselbackdepart" type="button"class="layui-btn layuiadmin-btn-useradmin layui-btn-radius">查询</button>
						</div>
					</div> 
					<div id="main" style="width:800px;height:400px;"></div>
				</form>
			</div>
<script src="../../js/tempx.js"></script>
<script src="../../js/echarts.common.min.js"></script>
<script src="../../js/jquery-3.3.1.js"></script>
<script src="../../layui/layui.js" charset="utf-8"></script>
<script>
	layui.use(['element','layer', 'carousel', 'table','jquery','form'], function(){
		var element = layui.element;
		var carousel = layui.carousel;
		var table = layui.table;
		var $ = layui.jquery;
		var layer = layui.layer;
		var form = layui.form;
		//获取折线图对象
		var myChart = echarts.init(document.getElementById('main'));
		//年分下拉框改变事件
		form.on('select(year)', function(data){
			//初始化折线图
		    initChart();
			//调用折线图方法
		    getxAxis(data.value);
		    //$("#main").load(form.render('select'));
		})
		
		//初始化折线图
		function initChart(){
			option = {
			    title: {
			        text: '车速折现图'
			    },
			    tooltip : {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            label: {
			                backgroundColor: '#6a7985'
			            }
			        }
			    },
			    legend: {/* 分组类型 */
			        data:['车速']
			    },
			    toolbox: {
			        feature: {
			            saveAsImage: {}
			        }
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis : [
			        {
		            	position: 'bottom',
			            type : 'category',
			            boundaryGap : false,
			            id:[],
			            data : ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        
			        {
			            name:'车速',
			            type:'line',
			            stack: '总量',
			            areaStyle: {normal: {}},
			            data:[0,0,0,0,0,0,0,0,0,0,0,0]
			        }
			    ]
			};
			myChart.setOption(option);
		}
		
		//获取折线图数据并改变折线图
		function getxAxis(year){
			$.ajax({
				type : "post",
				url : "statistics/year",
				data : {
					year:year
				},
				dataType : "json",
				success : function(succ) {
					if (succ.code == 1) {
						layer.msg(succ.msg,{icon : 5});
					} else {
						var optionjson = option;
						var out = optionjson.series[0].data;
						var input = optionjson.series[1].data;
						for(var i=1;i<=12;i++){
							for(var j=0;j<succ.data.length;j++){
								if(i == succ.data[j].datetime){
									if(succ.data[j].type == 0){
										out[i-1] = succ.data[j].money;
									}else{
										input[i-1] = succ.data[j].money;
									}
								}
							}
						}
						optionjson.series[0].data = out;
						optionjson.series[1].data = input;
						myChart.setOption(optionjson);
					}
				},
				error : function() {
					layer.msg('请求失败，稍后再试',{icon : 5});
				}
			});
		}
		//页面加载时
		$(document).ready(function(){
			var myDate= new Date(); 
		    var startYear=myDate.getFullYear()-50;//起始年份 
		    var endYear=myDate.getFullYear();//结束年份 
		    var obj=document.getElementById('year') 
		    for (var i=endYear;i>=startYear;i--) 
		    { 
		      obj.options.add(new Option(i,i)); 
		    } 
		    obj.options[obj.options.length-51].selected=1;
		    form.render('select')
		    //初始化折线图
		    initChart();
		    //调用折线图方法
		    getxAxis(endYear);
		})
	});
		
	</script>
</body>
</html>